<template>
  <div class="seat-edit">
    <el-alert class="tooltip-text" :closable="false" title="座位添加说明：">
      <p>1、请选择好行和列，一定要先选择好，后面变更会导致之前的重置</p>
      <p>2、# 代表过道或不可买，@ 代表已经被购买, 数字代表座位号</p>
    </el-alert>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item prop="name" label="厅名字">
        <el-col :span="6">
          <el-input v-model="ruleForm.name" placeholder="请输入厅名字"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item prop="status" label="状态">
        <el-switch v-model="ruleForm.status" :inactive-value="0" :active-value="1"></el-switch>
      </el-form-item>

      <el-form-item label="行*列">
        <el-col :span="3">
          行：
          <el-input
            type="number"
            :min="1"
            v-model="rows"
            style="display: inline-block; width: 80px;"
          ></el-input>
        </el-col>
        <el-col :span="3">
          列：
          <el-input
            type="number"
            :min="1"
            v-model="cols"
            style="display: inline-block; width: 80px;"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="座位">
        <table class="table-hall" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <td style="border: 0;"></td>
              <td v-for="(v, i) in sites[0]" :key="i" style="border: 0;">{{i+1}}</td>
            </tr>
            <tr v-for="(r, ri) in sites" :key="ri">
              <td style="border: 0; text-align: right; padding-right: 15px;">{{ri+1}}</td>
              <td v-for="(l, li) in r" :key="li">
                <input v-model="l.no" style="border: 0;" :placeholder="(ri+1) + '排' + (li+1) + '座'" />
              </td>
            </tr>
          </tbody>
        </table>
      </el-form-item>
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SeatEdit',
  data () {
    return {
      loading: false,
      ruleForm: {
        name: '',
        status: 1
      },
      rules: {
        name: [{ required: true, message: '请输入座位名称', trigger: 'blur' }]
      },
      rows: 0,
      cols: 0,
      sites: []
    }
  },
  created () {
    let row = this.$route.query.row
    if (!row.id) {
      row = JSON.parse(localStorage.getItem('seat_row'))
    } else {
      localStorage.setItem('seat_row', JSON.stringify(row))
    }
    this.ruleForm = row
    this.sites = row.map
    this.rows = row.map.length || 0
    this.cols = row.map ? row.map[0].length : 0
  },
  methods: {
    submit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 判断有没有添加座位
          this.ruleForm.map = this.sites
          if (!this.ruleForm.map || this.ruleForm.map.length <= 0) {
            this.$message.warning('请添加座位')
            return false
          }
          this.loading = true
          this.$axios.post(`/admin/seat/${this.ruleForm.id}`, this.ruleForm)
            .then(response => {
              this.loading = false
              if (!response.data.err_code) {
                this.$message.success('修改成功')
                this.$router.back()
              } else {
                this.$message.warning(response.data.message)
              }
            })
            .catch(() => {
              this.loading = false
              this.$message.error('服务器开了个小差，请稍后再试')
            })
        }
      })

      return false
    },
    goBack () {
      this.$router.back(-1)
    },
    generateTable () {
      if (this.rows > 0 && this.cols > 0) {
        let sites = []
        for (let i = 0; i < this.rows; i++) {
          sites[i] = []
          for (let j = 0; j < this.cols; j++) {
            sites[i][j] = this.getRowsColsVal(i, j)
          }
        }
        this.sites = sites
      }
    },
    getRowsColsVal (i, j) {
      if (this.sites[i] && this.sites[i][j]) {
        return this.sites[i][j]
      }
      return ''
    }
  },
  watch: {
    rows () {
      this.generateTable()
    },
    cols () {
      this.generateTable()
    }
  }
}
</script>
<style lang="stylus">
.table-hall td
  width 80px
  // height: 80px;
  border 1px solid #ddd
  text-align center
  outline none

  .el-input__inner
    border none

  input
    outline none
    height 40px
    line-height 40px
    padding 0 15px
    width 50px
    text-align center
</style>
